<template>
    <transition appear name="custom-classes-transition"
        enter-active-class="animate__animated animate__faster  animate__fadeInLeft "
        leave-active-class="animate__animated animate__faster animate__fadeOutLeft ">
        <div class="left_box" v-if="animate && showmenu" id="menu">
            <div class="content">
                <slot></slot>
                <div class="left-btn" @click="handleMenu()">
                    <img src="../../assets/sidesImages/收起_左.png" alt="">
                </div>

            </div>
        </div>
    </transition>
    <div class="showmenu" v-if="!showmenu" @click="handleMenu()">
        <img src="../../assets/sidesImages/展开_左.png" alt="">
    </div>
    <AsideBtn></AsideBtn>
    
</template>

<script setup lang="ts">
import { useAnimateStore } from '../../stores/animate'

import { computed, ref } from "vue"


const animatestore = useAnimateStore();
const animate = computed(() => animatestore.$state.Animate)
const showmenu = ref<Boolean>(true)
const handleMenu = () => {
    if (showmenu.value == true) {
        showmenu.value = false
    } else {
        showmenu.value = true
    }
}
</script>

<style scoped lang="scss">
.left_box {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 24.25vw;
    height: 88vh;
    top: 8.5vh;
    left: 1.8vw;
    background: linear-gradient(90deg, rgb(91 125 193 / 36%) 0%, rgba(13, 42, 67, 0.24) 100%);
    z-index: 9;
    border-radius: 10px;
    .floorBtn{

    }
    .content {
        width: 100%;
        height: 100%;
        // border: 1px solid rgba(255, 255, 255, 0.527);
        box-sizing: border-box;
        position: relative;
        display: flex;
        padding: 10px;
        flex-direction: column;

        box-sizing: border-box;

        .left-btn {
            cursor: pointer;
            position: absolute;
            right: -20px;
            top: 50%;
            transform: translateY(-50%);
        }

    }
}

.showmenu {
    position: absolute;
    top: 54%;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 9;

    img {
        width: 24px;
    }
}
</style>